
<!--
 * @Author: @miao-xiongmei 2575733397@qq.com
 * @Date: 2022-07-15 10:12:46
 * @LastEditors: @miao-xiongmei 2575733397@qq.com
 * @LastEditTime: 2022-07-24 17:37:43
 * @FilePath: \tainfuhealh\src\components\bookingManagement\search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 搜索框：按项目名称搜索 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <el-col :span="18" style="padding-left: 0;">
                    <el-input v-model="userInfo.projectName" placeholder="请输入项目名称"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="seachCheckItem()">查询</el-button>
                </el-col>
            </el-col>
        </el-row>
        <!-- 新增检查项目按钮 -->
        <el-button type="primary" class='addCheckItem' @click="addCheckItemFormVisible = true">新增</el-button>
        <!-- 检查项目表格 -->
        <el-table :data="checkTable" style="width: 100%; text-align: center; "
            :header-cell-style="{ 'background-color': 'rgb(39,49,70)', 'text-align': 'center', 'color': 'white' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="项目编码">
            </el-table-column>
            <el-table-column prop="projectName" label="项目名称">
            </el-table-column>
            <el-table-column prop="projectType" label="项目类型">
            </el-table-column>
            <el-table-column prop="sex" label="适用性别">
            </el-table-column>
            <el-table-column prop="applicableAge" label="适用年龄">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="projectDescription" label="项目说明">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button size="mini" @click="updateCheckItem(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteCheckItem(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <paging :total="total" :userInfo="userInfo"></paging>
        <!-- 新增模态框 -->
        <el-dialog title="添加检查项" :visible.sync="addCheckItemFormVisible" width="70%">
            <el-form :model="addCheckItemForm" :rules="rules" ref="addCheckItemForm" label-width="100px"
                class="demo-addCheckItemForm" style="width:95%;float:left;">
                <el-form-item label="编号" prop="id">
                    <el-input v-model.number="addCheckItemForm.id" readonly disabled placeholder="自动生成"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="addCheckItemForm.projectName"></el-input>
                </el-form-item>

                <el-form-item label="助记名" prop="mnemonicName">
                    <el-input v-model="addCheckItemForm.mnemonicName"></el-input>
                </el-form-item>
                <el-form-item label="适用性别" prop="sex">
                    <el-select v-model="addCheckItemForm.sex" placeholder="请选择适用性别" style="width:100%">
                        <el-option label="不限" value="不限"></el-option>
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最大年龄" prop="maxAge">
                    <el-input v-model.number="addCheckItemForm.maxAge"></el-input>
                </el-form-item>
                <el-form-item label="最小年龄" prop="minAge">
                    <el-input v-model.number="addCheckItemForm.minAge"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" prop="category" style="width:50%">
                    <el-select v-model="addCheckItemForm.category" placeholder="请选择所属分类" style="width:100%">
                        <el-option label="综合体检" value="category1"></el-option>
                        <el-option label="综合体检" value="category2"></el-option>
                        <el-option label="综合体检" value="category3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目类型" prop="projectType">
                    <el-select v-model="addCheckItemForm.projectType" placeholder="请选择项目类型" style="width:100%">
                        <el-option label="检测项目" value="project1"></el-option>
                        <el-option label="检测项目" value="project2"></el-option>
                        <el-option label="检测项目" value="project3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model.number="addCheckItemForm.price"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="cost">
                    <el-input v-model.number="addCheckItemForm.cost"></el-input>
                </el-form-item>
                <el-form-item label="项目说明" prop="projectDescription" style="width:100%;float:left;">
                    <el-input type="textarea" v-model="addCheckItemForm.projectDescription"></el-input>
                </el-form-item>
                <el-form-item label="注意事项" prop="attention" style="width:100%;float:left;">
                    <el-input type="textarea" v-model="addCheckItemForm.attention" style="height:90px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="width: 100%;float:right">
                <el-button @click="addCheckItemFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddCheckItem('addCheckItemForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑模态框 -->
        <el-dialog title="编辑检查项" :visible.sync="updateCheckItemFormVisible" width="70%" ref='updateCheckItemForm'>
            <el-form :model="updateCheckItemForm" :rules="rules" ref="updateCheckItemForm" label-width="100px"
                class="demo-updateCheckItemForm" style="width:95%;float:left;">
                <el-form-item label="编号" prop="id">
                    <el-input v-model.number="updateCheckItemForm.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="updateCheckItemForm.projectName"></el-input>
                </el-form-item>

                <el-form-item label="助记名" prop="mnemonicName">
                    <el-input v-model="updateCheckItemForm.mnemonicName"></el-input>
                </el-form-item>
                <el-form-item label="适用性别" prop="sex">
                    <el-select v-model="updateCheckItemForm.sex" placeholder="请选择适用性别" style="width:100%">
                        <el-option label="不限" value="不限"></el-option>
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最大年龄" prop="maxAge">
                    <el-input v-model.number="updateCheckItemForm.maxAge"></el-input>
                </el-form-item>
                <el-form-item label="最小年龄" prop="minAge">
                    <el-input v-model.number="updateCheckItemForm.minAge"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" prop="category" style="width:50%">
                    <el-select v-model="updateCheckItemForm.category" placeholder="请选择所属分类" style="width:100%">
                        <el-option label="综合体检" value="category1"></el-option>
                        <el-option label="综合体检" value="category2"></el-option>
                        <el-option label="综合体检" value="category3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目类型" prop="projectType">
                    <el-select v-model="updateCheckItemForm.projectType" placeholder="请选择项目类型" style="width:100%">
                        <el-option label="检测项目" value="project1"></el-option>
                        <el-option label="检测项目" value="project2"></el-option>
                        <el-option label="检测项目" value="project3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model.number="updateCheckItemForm.price"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="cost">
                    <el-input v-model.number="updateCheckItemForm.cost"></el-input>
                </el-form-item>
                <el-form-item label="项目说明" prop="projectDescription" style="width:100%;float:left;">
                    <el-input type="textarea" v-model="updateCheckItemForm.projectDescription"></el-input>
                </el-form-item>
                <el-form-item label="注意事项" prop="attention" style="width:100%;float:left;">
                    <el-input type="textarea" v-model="updateCheckItemForm.attention" style="height:90px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="width: 100%;float:right">
                <el-button @click="updateCheckItemFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpdateCheckItem('updateCheckItemForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
import paging from '../../components/book/paging.vue'
export default {
    data() {
        return {
            total: 0,
            userInfo: {
                projectName: '',
                limit: 5,
                page: 1,
            },
            // input: '',
            // 添加模态框可见性
            addCheckItemFormVisible: false,
            // 修改模态框可见性
            updateCheckItemFormVisible: false,
            checkTable: [{
            }],
            // 添加检查项目表单
            addCheckItemForm: {
                id: '',
                projectName: '',
                mnemonicName: '',
                sex: '',
                minAge: '',
                maxAge: '',
                category: '',
                projectType: '',
                price: '',
                cost: '',
                projectDescription: '',
                attention: ''
            },
            // 编辑检查项目表单
            updateCheckItemForm: {
                id: '',
                projectName: '',
                mnemonicName: '',
                sex: '',
                minAge: '',
                maxAge: '',
                category: '',
                projectType: '',
                price: '',
                cost: '',
                projectDescription: '',
                attention: ''
            },
            // 表单验证规则
            rules: {
                projectName: [
                    { required: true, message: "请输入检查项目名称", trigger: "blur" }
                ],
                mnemonicName: [
                    { message: "请输入别名", trigger: "blur" }
                ],
                sex: [
                    { required: true, message: "请选择适用性别", trigger: "blur" },
                ],
                category: [
                    { message: "请输入所属分类", trigger: "blur" }
                ],
                projectType: [
                    { message: "请输入项目类型", trigger: "blur" }
                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                    { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "请输入正确的价格", trigger: "blur" }
                ],
                cost: [
                    { required: true, message: '请输入成本价', trigger: 'blur' },
                    { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "请输入正确的成本价", trigger: "blur" }
                ],
                projectDescription: [
                    { message: '请输入项目说明', trigger: 'blur' }
                ],
                attention: [
                    { message: '请输入注意事项', trigger: 'blur' }
                ]
            },
        }
    },
    components: {
        paging
    },
    methods: {
        // 编辑检查项目按钮
        updateCheckItem(id) {
            this.updateCheckItemFormVisible = true;
            ////console.log(id)
            // this.updateCheckItemForm = table;
            this.$axios({
                method: "get",
                url: "/checkitemmanagement/find",
                params: { id },
            })
                .then(res => {
                    if (res.code === 0) {
                        this.updateCheckItemForm = res.data;
                    } else {
                    }
                })
        },
        // 删除检查项目按钮 
        deleteCheckItem(id) {
            const confirmResult = this.$confirm('此操作将永久删除该检查项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$axios({
                        method: "get",
                        url: "/checkitemmanagement/delete",
                        params: { id },
                    })
                        .then(res => {
                            if (res.code === 0) {
                                ////console.log(id)
                                this.getAll();
                                this.$message.success("删除检查项目成功！")
                            } else {
                                this.$message.error("删除检查项目失败！")
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })

        },
        // 提交新增检查项目表单
        submitAddCheckItem(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: "/checkitemmanagement/add",
                        data: this.addCheckItemForm
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getAll()
                                this.$message.success('新增检查项目成功！')
                                this.addCheckItemFormVisible = false;
                            } else {
                                this.$message.error("新增检查项目失败！")
                            }
                        })

                } else {
                    ////console.log('error submit!!');
                    return false;
                }
            });
        },
        // 提交编辑检查项目
        submitUpdateCheckItem(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: "/checkitemmanagement/update",
                        data: this.updateCheckItemForm
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getAll()
                                this.$message.success('编辑检查项目成功！')
                                this.updateCheckItemFormVisible = false;
                            } else {
                                this.$message.error("新增检查项目失败！")
                            }
                        })

                } else {
                    ////console.log('error submit!!');
                    return false;
                }
            });
        },
        //查询
        seachCheckItem() {
            this.$axios({
                method: "post",
                url: "/checkitemmanagement/list",
                // dataType: 'jsonp',
                data: this.userInfo,

            })
                .then(res => {
                    if (res.code === 0) {
                        this.checkTable = res.data;
                        ////console.log(this.userInfo);
                        ////console.log(res.data)
                    } else {
                        ////console.log(this.userInfo);
                    }
                })

        },
        // 渲染原始表格
        getAll() {
            // ////console.log(111)
            this.$axios({
                method: "post",
                url: "/checkitemmanagement/list",
                data: this.userInfo,
            })
                .then(res => {
                    if (res.code === 0) {
                        ////console.log(res.data)
                        this.checkTable = res.data;
                        this.total = res.count;
                        for (let i = 0; i < res.data.length; i++) {
                            this.checkTable[i].applicableAge = res.data[i].minAge + '-' + res.data[i].maxAge;
                            // ////console.log(res.data)
                        }
                    } else {
                        ////console.log(this.userInfo);
                        ////console.log(res.data)
                    }
                })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    },
    created() {
        this.getAll();
    },
}
</script>

<style scoped>
.addCheckItem {
    margin: 30px 0;
}

.el-dialog {
    overflow: hidden;
}

.el-form>.el-form-item {
    width: 50%;
    float: left;
}

.dialog-footer {
    margin: 20px;
}
</style>